<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>flutter | 前端码农</title>
    <meta name="description" content="前端码农手记">
    <link rel="preload stylesheet" href="/fe-handbook/document/assets/style.c131dda6.css" as="style">
    <script type="module" src="/fe-handbook/document/assets/app.fb33e324.js"></script>
    <link rel="preload" href="/fe-handbook/document/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
  <link rel="modulepreload" href="/fe-handbook/document/assets/chunks/framework.e1becf5d.js">
  <link rel="modulepreload" href="/fe-handbook/document/assets/chunks/theme.ebfdf2c7.js">
  <link rel="modulepreload" href="/fe-handbook/document/assets/pages_flutter_index.md.b69ef00b.lean.js">
  <link rel="icon" type="image/svg+xml" href="images/logo.svg">
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-bffce215><!--[--><!--]--><!--[--><span tabindex="-1" data-v-73e3a132></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-73e3a132> Skip to content </a><!--]--><!----><header class="VPNav" data-v-bffce215 data-v-5bdc5df3><div class="VPNavBar has-sidebar" data-v-5bdc5df3 data-v-c388e33c><div class="container" data-v-c388e33c><div class="title" data-v-c388e33c><div class="VPNavBarTitle has-sidebar" data-v-c388e33c data-v-1ab7b21f><a class="title" href="/fe-handbook/document/" data-v-1ab7b21f><!--[--><!--]--><!--[--><img class="VPImage logo" src="/fe-handbook/document/images/logo.svg" alt data-v-dc109a54><!--]--><!--[-->前端码农<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-c388e33c><div class="curtain" data-v-c388e33c></div><div class="content-body" data-v-c388e33c><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-c388e33c><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-c388e33c data-v-f732b5d0><span id="main-nav-aria-label" class="visually-hidden" data-v-f732b5d0>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/fe-handbook/document/" tabindex="0" data-v-f732b5d0 data-v-b7aed9c7 data-v-f3ed0000><!--[-->主页<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/fe-handbook/document/pages/guide.html" tabindex="0" data-v-f732b5d0 data-v-b7aed9c7 data-v-f3ed0000><!--[-->指南<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/fe-handbook/document/pages/updateLog.html" tabindex="0" data-v-f732b5d0 data-v-b7aed9c7 data-v-f3ed0000><!--[-->更新日志<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-c388e33c data-v-5e9f0637><label title="toggle dark mode" data-v-5e9f0637 data-v-67878c63><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-checked="false" data-v-67878c63 data-v-92d8f6fb><span class="check" data-v-92d8f6fb><span class="icon" data-v-92d8f6fb><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-67878c63><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-67878c63><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></label></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-c388e33c data-v-ef6192dc data-v-b8f6762d><!--[--><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-c388e33c data-v-c8c2ae4b data-v-6afe904b><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-6afe904b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-6afe904b><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-6afe904b><div class="VPMenu" data-v-6afe904b data-v-e42ed9b3><!----><!--[--><!--[--><!----><div class="group" data-v-c8c2ae4b><div class="item appearance" data-v-c8c2ae4b><p class="label" data-v-c8c2ae4b>Appearance</p><div class="appearance-action" data-v-c8c2ae4b><label title="toggle dark mode" data-v-c8c2ae4b data-v-67878c63><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-checked="false" data-v-67878c63 data-v-92d8f6fb><span class="check" data-v-92d8f6fb><span class="icon" data-v-92d8f6fb><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-67878c63><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-67878c63><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></label></div></div></div><div class="group" data-v-c8c2ae4b><div class="item social-links" data-v-c8c2ae4b><div class="VPSocialLinks social-links-list" data-v-c8c2ae4b data-v-b8f6762d><!--[--><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-c388e33c data-v-6bee1efd><span class="container" data-v-6bee1efd><span class="top" data-v-6bee1efd></span><span class="middle" data-v-6bee1efd></span><span class="bottom" data-v-6bee1efd></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-bffce215 data-v-ba1b30d0><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-ba1b30d0><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-ba1b30d0><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-ba1b30d0>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-ba1b30d0 data-v-fb63c957><button data-v-fb63c957>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-bffce215 data-v-fe05da0a><div class="curtain" data-v-fe05da0a></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-fe05da0a><span class="visually-hidden" id="sidebar-aria-label" data-v-fe05da0a> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible" data-v-fe05da0a data-v-0bb349fd><!----><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/guide.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>开发指南</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible" data-v-fe05da0a data-v-0bb349fd><div class="item" role="button" tabindex="0" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><h2 class="text" data-v-0bb349fd>JavaScript高级程序设计</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-0bb349fd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-0bb349fd><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/advancedProgramming/index.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>0.前言</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/advancedProgramming/chapterOne.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>1.什么是JavaScript</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/advancedProgramming/chapterTwo.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>2.HTML中的JavaScript</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/advancedProgramming/chapterThree.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>3.语言基础</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible" data-v-fe05da0a data-v-0bb349fd><div class="item" role="button" tabindex="0" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><h2 class="text" data-v-0bb349fd>vue技术栈</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-0bb349fd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-0bb349fd><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/vue/vue2.0.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>vue2.0</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/vue/vue3.0.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>vue3.0</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/vue/vuex4.0.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>vuex4.0</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible" data-v-fe05da0a data-v-0bb349fd><div class="item" role="button" tabindex="0" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><h2 class="text" data-v-0bb349fd>react技术栈</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-0bb349fd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-0bb349fd><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/react/react.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>react18</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/react/redux.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>redux</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible" data-v-fe05da0a data-v-0bb349fd><div class="item" role="button" tabindex="0" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><h2 class="text" data-v-0bb349fd>nodejs技术栈</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-0bb349fd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-0bb349fd><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/nodeJS/index.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>nodeJS</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/nodeJS/nest.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>nest</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible has-active" data-v-fe05da0a data-v-0bb349fd><div class="item" role="button" tabindex="0" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><h2 class="text" data-v-0bb349fd>flutter</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-0bb349fd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-0bb349fd><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/flutter/index.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>flutter</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible" data-v-fe05da0a data-v-0bb349fd><div class="item" role="button" tabindex="0" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><h2 class="text" data-v-0bb349fd>数据结构算法&设计模式</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-0bb349fd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-0bb349fd><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/dataStructure.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>dataStructure</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/designPatterns.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>设计模式</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible" data-v-fe05da0a data-v-0bb349fd><div class="item" role="button" tabindex="0" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><h2 class="text" data-v-0bb349fd>js基础进阶</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-0bb349fd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-0bb349fd><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/dataType.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>数据类型</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/typeConversion.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>数据类型转换</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/prototype.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>原型与原型链</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/scope.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>闭包</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/this.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>this指针</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/promotion.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>JS中的变量提升和函数提升</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/eventLoop.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>异步&事件循环机制</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/promise.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>promise</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/cookieLocal.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>cookie&local</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/arrayApi.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>arrayApi</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/regular.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>正则</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/coding.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>coding</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/typescript.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>typescript</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible" data-v-fe05da0a data-v-0bb349fd><div class="item" role="button" tabindex="0" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><h2 class="text" data-v-0bb349fd>前端综合</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-0bb349fd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-0bb349fd><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/eightLeggedEssay.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>前端八股文</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/binary.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>二进制</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/ssr.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>ssr</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/webpack.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>webpack</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/http.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>http</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/optimize.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>性能优化</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/xss-csrf.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>xss-csrf</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/linux.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>linux</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/nginx.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>nginx</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/git.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>git管理</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible" data-v-fe05da0a data-v-0bb349fd><div class="item" role="button" tabindex="0" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><h2 class="text" data-v-0bb349fd>工作复盘</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-0bb349fd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-0bb349fd><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/stripe.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>stripe支付体检优化</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/interfaceSignatureDesign.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>接口签名设计</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/reduxpersistence.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>redux数据持久化</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/vuexpersistence.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>vuex数据持久化</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/reactSolt.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>react插槽设计</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/bigfileUpload.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>大文件上传</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/audio.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>音频录制</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/virtuaLlist.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>虚拟列表</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/imageCroppingCompression.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>图片裁剪&压缩</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/axiosPackaging.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>axios封装</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/monitor.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>前端监控SDK</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/ImagedragVerification.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>图片拖动验证</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible" data-v-fe05da0a data-v-0bb349fd><div class="item" role="button" tabindex="0" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><h2 class="text" data-v-0bb349fd>html/css</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-0bb349fd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-0bb349fd><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/htmlCss/boxModel.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>盒模型</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/htmlCss/margin.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>margin重叠</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/htmlCss/bfc.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>bfc</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/htmlCss/layout.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>圣杯布局&双飞翼布局</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/htmlCss/dice.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>flex画骰子</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/htmlCss/position.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>position定位</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/htmlCss/align.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>对齐</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/htmlCss/rem-em-vw.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>rem-em-vw</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/htmlCss/grid.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>grid布局</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/htmlCss/htmlCss.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>htmlCss总结</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-bffce215 data-v-91952ce3><div class="VPDoc has-sidebar has-aside" data-v-91952ce3 data-v-c11df1f0><!--[--><!--]--><div class="container" data-v-c11df1f0><div class="aside" data-v-c11df1f0><div class="aside-curtain" data-v-c11df1f0></div><div class="aside-container" data-v-c11df1f0><div class="aside-content" data-v-c11df1f0><div class="VPDocAside" data-v-c11df1f0 data-v-cb998dce><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-cb998dce data-v-c834746b><div class="content" data-v-c834746b><div class="outline-marker" data-v-c834746b></div><div class="outline-title" data-v-c834746b>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-c834746b><span class="visually-hidden" id="doc-outline-aria-label" data-v-c834746b> Table of Contents for current page </span><ul class="root" data-v-c834746b data-v-a379eb72><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-cb998dce></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-c11df1f0><div class="content-container" data-v-c11df1f0><!--[--><!--]--><!----><main class="main" data-v-c11df1f0><div style="position:relative;" class="vp-doc _fe-handbook_document_pages_flutter_index" data-v-c11df1f0><div><h1 id="flutter" tabindex="-1">flutter <a class="header-anchor" href="#flutter" aria-label="Permalink to &quot;flutter&quot;">​</a></h1><h2 id="数据类型" tabindex="-1">数据类型 <a class="header-anchor" href="#数据类型" aria-label="Permalink to &quot;数据类型&quot;">​</a></h2><h3 id="数字类型" tabindex="-1">数字类型 <a class="header-anchor" href="#数字类型" aria-label="Permalink to &quot;数字类型&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">num num1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 是数字类型的父类，有两个子类 int 和 double。</span></span>
<span class="line"><span style="color:#A6ACCD;"> num num2 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;"> int int1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//只能是整数</span></span>
<span class="line"><span style="color:#A6ACCD;"> double d1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3.1415</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//双精度</span></span>
<span class="line"><span style="color:#A6ACCD;"> num1</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">abs</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">  </span><span style="color:#676E95;font-style:italic;">//求绝对值</span></span>
<span class="line"><span style="color:#A6ACCD;"> num1</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toInt</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//转换成int</span></span>
<span class="line"><span style="color:#A6ACCD;"> num1</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toDouble</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//转换成Double</span></span></code></pre></div><h3 id="字符串" tabindex="-1">字符串 <a class="header-anchor" href="#字符串" aria-label="Permalink to &quot;字符串&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">String str1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">单引号</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">String str2 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">双引号</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">String str3 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">st1:$str1 str2:$str2</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//字符串拼接</span></span>
<span class="line"><span style="color:#A6ACCD;">String str4 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">st1:</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> str1 </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;"> str2:</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> str2</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//字符串拼接</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//常用方法</span></span>
<span class="line"><span style="color:#82AAFF;">print</span><span style="color:#A6ACCD;">(str5</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">substring</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//字符串截取</span></span>
<span class="line"><span style="color:#82AAFF;">print</span><span style="color:#A6ACCD;">(str5</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">indexOf</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">类型</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//获取指定字符串位置</span></span></code></pre></div><h3 id="布尔类型" tabindex="-1">布尔类型 <a class="header-anchor" href="#布尔类型" aria-label="Permalink to &quot;布尔类型&quot;">​</a></h3><ul><li>Dart 是强 bool 类型检查，只有 bool 类型的值是 true 才被认为是 true</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">bool success </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">bool fail </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="list-集合" tabindex="-1">List 集合 <a class="header-anchor" href="#list-集合" aria-label="Permalink to &quot;List 集合&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">List list </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">集合</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//初始化时，添加元素</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">List</span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">int</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> list2 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> []</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 类型约束</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">List list3 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> []</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">list3</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addAll</span><span style="color:#A6ACCD;">(list)</span><span style="color:#89DDFF;">;</span><span style="color:#676E95;font-style:italic;">// 直接添加整个集合</span></span>
<span class="line"><span style="color:#82AAFF;">print</span><span style="color:#A6ACCD;">(list3)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">List list4 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> List</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">generate</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">index</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> index </span><span style="color:#89DDFF;">*</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#82AAFF;">print</span><span style="color:#A6ACCD;">(list4)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">///遍历集合的方式</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> (int i </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> i </span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;"> list</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> i</span><span style="color:#89DDFF;">++</span><span style="color:#A6ACCD;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#82AAFF;">print</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">list</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;">])</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> (</span><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> o </span><span style="color:#89DDFF;">in</span><span style="color:#A6ACCD;"> list) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#82AAFF;">print</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">o</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">list</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#A6ACCD;">((val) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">print</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">val</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="map" tabindex="-1">Map <a class="header-anchor" href="#map" aria-label="Permalink to &quot;Map&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">Map names </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">username</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">hu.lei</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">hulei</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#A6ACCD;">names[</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">add</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">] </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">sh</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">///Map遍历</span></span>
<span class="line"><span style="color:#A6ACCD;">ages</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#A6ACCD;">((k</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> v) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">print</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">$k $v</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">Map ages2 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> ages</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">map</span><span style="color:#A6ACCD;">((k</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> v) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">//迭代生成一个新Map</span></span>
<span class="line"><span style="color:#A6ACCD;">  return </span><span style="color:#F07178;">MapEntry</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">v</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">k</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#82AAFF;">print</span><span style="color:#A6ACCD;">(ages2)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> (</span><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> key </span><span style="color:#89DDFF;">in</span><span style="color:#A6ACCD;"> ages</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">keys) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#82AAFF;">print</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">$key ${ages[key]}</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="dynamic、var、object-三者的区别" tabindex="-1">dynamic、var、Object 三者的区别 <a class="header-anchor" href="#dynamic、var、object-三者的区别" aria-label="Permalink to &quot;dynamic、var、Object 三者的区别&quot;">​</a></h2><ul><li>dynamic <ul><li>dynamic 是动态类型，不建议使用，因为代码静态类型检查不会报错</li></ul></li><li>var <ul><li>var 是一个关键字,会自动类型推导，如果声明的是字符串，在赋值 int 类型，在编译时就会报错</li></ul></li><li>Object</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">dynamic a1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">hu.lei</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#82AAFF;">print</span><span style="color:#A6ACCD;">(a1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">runtimeType)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// String</span></span>
<span class="line"><span style="color:#A6ACCD;">  a1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">20</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#82AAFF;">print</span><span style="color:#A6ACCD;">(a1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">runtimeType)</span><span style="color:#89DDFF;">;</span><span style="color:#676E95;font-style:italic;">// int</span></span>
<span class="line"><span style="color:#A6ACCD;">  a1</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">fn</span><span style="color:#A6ACCD;">() </span><span style="color:#676E95;font-style:italic;">// 编译时不会报错，运用时才会报错</span></span></code></pre></div><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">hu.lei</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#82AAFF;">print</span><span style="color:#A6ACCD;">(a1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">runtimeType)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// String</span></span>
<span class="line"><span style="color:#A6ACCD;">a1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">20</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//  Error: A value of type &#39;int&#39; can&#39;t be assigned to a variable of type &#39;String&#39;.</span></span></code></pre></div><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">Object o1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">11</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#82AAFF;">print</span><span style="color:#A6ACCD;">(o1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">runtimeType)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// String</span></span>
<span class="line"><span style="color:#82AAFF;">print</span><span style="color:#A6ACCD;">(o1</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">fn</span><span style="color:#A6ACCD;">())</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//  Error: The method &#39;fn&#39; isn&#39;t defined for the class &#39;Object&#39;.</span></span></code></pre></div><h2 id="面向对象" tabindex="-1">面向对象 <a class="header-anchor" href="#面向对象" aria-label="Permalink to &quot;面向对象&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 实例化</span></span>
<span class="line"><span style="color:#A6ACCD;">Student student </span><span style="color:#89DDFF;">=</span><span style="color:#82AAFF;">Student</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">hu.lei</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">20</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">东风之星</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">city:</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">北京</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">student</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">school</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 调用get取值</span></span>
<span class="line"><span style="color:#A6ACCD;">student</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">school </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">东风之星</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 调用set赋值</span></span>
<span class="line"><span style="color:#A6ACCD;">Student</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">doPrint</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">调用静态方法</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#82AAFF;">print</span><span style="color:#A6ACCD;">( student</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toString</span><span style="color:#A6ACCD;">())</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 工厂构造实例化</span></span>
<span class="line"><span style="color:#A6ACCD;">Student factoryStudent </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> Student</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stu</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">Student</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">hu.lei</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">20</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">东风之星</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">city:</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">北京</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">factoryStudent</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">school</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 调用get取值</span></span>
<span class="line"><span style="color:#A6ACCD;">factoryStudent</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">school </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">东风之星</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 调用set赋值</span></span>
<span class="line"><span style="color:#82AAFF;">print</span><span style="color:#A6ACCD;">( factoryStudent</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toString</span><span style="color:#A6ACCD;">())</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 子类</span></span>
<span class="line"><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Student</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">extends</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Person</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">//定义类的变量</span></span>
<span class="line"><span style="color:#A6ACCD;">  String </span><span style="color:#F07178;">_school</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//通过下划线来标识私有字段（变量) 只能在本类中使用</span></span>
<span class="line"><span style="color:#A6ACCD;">  String </span><span style="color:#F07178;">city</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// city默认参数</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// 如果父类中有构造，必须调用父类的构造</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">Student</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">String</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">name</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;font-style:italic;">int</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">age</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;font-style:italic;">String</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">school</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;font-style:italic;">this</span><span style="color:#A6ACCD;">.</span><span style="color:#A6ACCD;font-style:italic;">city</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">上海</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">}):</span><span style="color:#FFCB6B;">_school</span><span style="color:#A6ACCD;"> =</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">$name.$school</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;">super</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">name</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">age</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">print</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">构造方法体不是必须的</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// get取值</span></span>
<span class="line"><span style="color:#A6ACCD;">  String </span><span style="color:#C792EA;">get</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">school</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=&gt;</span><span style="color:#A6ACCD;"> _school</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// get设置</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#C792EA;">set</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">school</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">String</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">value</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">_school</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">//命名工厂构造方法：类名.方法名调用</span></span>
<span class="line"><span style="color:#A6ACCD;">  factory Student</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stu</span><span style="color:#A6ACCD;">(Student stu) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Student</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">stu</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">stu</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">age</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">stu</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">school</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">city</span><span style="color:#F07178;">: </span><span style="color:#A6ACCD;">stu</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">city</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">@</span><span style="color:#A6ACCD;">override</span></span>
<span class="line"><span style="color:#A6ACCD;">  String </span><span style="color:#F07178;">toString</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">$name $age $_school $city</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">//静态方法</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#C792EA;">static</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">doPrint</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">String</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">str</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">print</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">doPrint:$str</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 父类</span></span>
<span class="line"><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Person</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  String </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  int </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// 有参数构造</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">Person</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">this.name</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">this.age</span><span style="color:#89DDFF;">){</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">@</span><span style="color:#A6ACCD;">override</span></span>
<span class="line"><span style="color:#A6ACCD;">  String </span><span style="color:#F07178;">toString</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">$name $age</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="单例模式" tabindex="-1">单例模式 <a class="header-anchor" href="#单例模式" aria-label="Permalink to &quot;单例模式&quot;">​</a></h2><ul><li>是有一个实例对象</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 单例</span></span>
<span class="line"><span style="color:#A6ACCD;">SingletonPattern singletonPattern </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">SingletonPattern</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">SingletonPattern singletonPattern1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">SingletonPattern</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#82AAFF;">print</span><span style="color:#A6ACCD;">(singletonPattern</span><span style="color:#89DDFF;">==</span><span style="color:#A6ACCD;">singletonPattern1)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">singletonPattern</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">test</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">///工厂构造方法演示</span></span>
<span class="line"><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">SingletonPattern</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#C792EA;">static</span><span style="color:#A6ACCD;"> final SingletonPattern </span><span style="color:#F07178;">_singletonPattern</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span></span>
<span class="line"><span style="color:#A6ACCD;">  SingletonPattern</span><span style="color:#89DDFF;">.</span><span style="color:#F07178;">_internal</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">///工厂构造函数</span></span>
<span class="line"><span style="color:#A6ACCD;">  factory </span><span style="color:#F07178;">SingletonPattern</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">_singletonPattern</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">///构造函数私有化，防止被误创建</span></span>
<span class="line"><span style="color:#A6ACCD;">  SingletonPattern</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">_internal</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">void</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">test</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">print</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">测试</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="继承抽象类" tabindex="-1">继承抽象类 <a class="header-anchor" href="#继承抽象类" aria-label="Permalink to &quot;继承抽象类&quot;">​</a></h2><ul><li>被 abstract 修饰的类就是抽象类，抽象类中的方法不能有方法体</li><li>如果一个类继承一个抽象类，必须实现抽象类中的方法</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Dog</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">extends</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Animal</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">@</span><span style="color:#A6ACCD;">override</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">void</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">eat</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">print</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">吃饭</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">abstract</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Animal</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">void</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">eat</span><span style="color:#89DDFF;">();</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="with-关键字" tabindex="-1">with 关键字 <a class="header-anchor" href="#with-关键字" aria-label="Permalink to &quot;with 关键字&quot;">​</a></h2><ul><li>类在继承中只能单继承</li><li>如果一个类中，需要继承多个类的特性，可以用 with</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">User</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">extends</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">BaseUser</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">with</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">User1</span><span style="color:#89DDFF;">,</span><span style="color:#FFCB6B;">User2</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="泛型" tabindex="-1">泛型 <a class="header-anchor" href="#泛型" aria-label="Permalink to &quot;泛型&quot;">​</a></h2><ul><li>泛型可以约束类型，可以进行类型推导</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">Cache</span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">String</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> cache </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Cache</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">cache</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setCache</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">key1</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#82AAFF;">print</span><span style="color:#A6ACCD;">(cache</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getCache</span><span style="color:#A6ACCD;">())</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Cache</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">T</span><span style="color:#89DDFF;">&gt;{</span></span>
<span class="line"><span style="color:#A6ACCD;">  late T </span><span style="color:#F07178;">key</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">setCache</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">T</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">){</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">  T </span><span style="color:#F07178;">getCache</span><span style="color:#89DDFF;">(){</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="widget-的生命周期" tabindex="-1">Widget 的生命周期 <a class="header-anchor" href="#widget-的生命周期" aria-label="Permalink to &quot;Widget 的生命周期&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">package:flutter/material.dart</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">///Flutter Widget的生命周期重点讲解StatefulWidget的生命周期</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">///因为无状态的widget StatelessWidget只有createElement、与build两个生命周期方法</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">///StatefulWidget的生命周期方法按照时期不同可以分为三组：</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">///1.初始化时期</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">///createState、initState</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">///2.更新期间</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">///didChangeDependencies、build、didUpdateWidget</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">///3.销毁期</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">///deactivate、dispose</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">///扩展阅读：</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">///http://www.devio.org/io/flutter_app/img/blog/flutter-widget-lifecycle.png</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">///https://flutterbyexample.com/stateful-widget-lifecycle/</span></span>
<span class="line"><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">WidgetLifecycle</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">extends</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">StatefulWidget</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  const </span><span style="color:#F07178;">WidgetLifecycle</span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;font-style:italic;">super</span><span style="color:#A6ACCD;">.</span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">});</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">///当我们构建一个新的StatefulWidget时，这个会立即调用</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">///并且这个方法必须被覆盖</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">@</span><span style="color:#A6ACCD;">override</span></span>
<span class="line"><span style="color:#A6ACCD;">  State</span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">WidgetLifecycle</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">createState</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">_WidgetLifecycleState</span><span style="color:#89DDFF;">();</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">_WidgetLifecycleState</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">extends</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">State</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">WidgetLifecycle</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  int </span><span style="color:#F07178;">_count</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">///这是创建widget时调用的除构造方法外的第一个方法：</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">///类似于Android的：onCreate() 与iOS的 viewDidLoad()</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">///在这个方法中通常会做一些初始化工作，比如channel的初始化，监听器的初始化等</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">@</span><span style="color:#A6ACCD;">override</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">void</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">initState</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">print</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">----initState----</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">super</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">initState</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">///当依赖的State对象改变时会调用：</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">///a.在第一次构建widget时，在initState（）之后立即调用此方法；</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">///b.如果的StatefulWidgets依赖于InheritedWidget，那么当当前State所依赖InheritedWidget中的变量改变时会再次调用它</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">///拓展：InheritedWidget可以高效的将数据在Widget树中向下传递、共享，可参考：https://book.flutterchina.club/chapter7/inherited_widget.html</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">@</span><span style="color:#A6ACCD;">override</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">void</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">didChangeDependencies</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">print</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">---didChangeDependencies----</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">super</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">didChangeDependencies</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">///这是一个必须实现的方法，在这里实现你要呈现的页面内容：</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">///它会在在didChangeDependencies()之后立即调用；</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">///另外当调用setState后也会再次调用该方法；</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">@</span><span style="color:#A6ACCD;">override</span></span>
<span class="line"><span style="color:#A6ACCD;">  Widget </span><span style="color:#F07178;">build</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">BuildContext</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">context</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">print</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">---build-----</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Scaffold</span><span style="color:#F07178;">(</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#A6ACCD;">appBar</span><span style="color:#F07178;">: </span><span style="color:#82AAFF;">AppBar</span><span style="color:#F07178;">(</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">title</span><span style="color:#F07178;">: </span><span style="color:#A6ACCD;">const</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Text</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Flutter页面生命周期</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">leading</span><span style="color:#F07178;">: </span><span style="color:#82AAFF;">BackButton</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">      )</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#A6ACCD;">body</span><span style="color:#F07178;">: </span><span style="color:#82AAFF;">Center</span><span style="color:#F07178;">(</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">child</span><span style="color:#F07178;">: </span><span style="color:#82AAFF;">Column</span><span style="color:#F07178;">(</span></span>
<span class="line"><span style="color:#F07178;">          </span><span style="color:#A6ACCD;">children</span><span style="color:#F07178;">: </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Widget</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">[</span></span>
<span class="line"><span style="color:#A6ACCD;">            ElevatedButton(</span></span>
<span class="line"><span style="color:#A6ACCD;">              onPressed: () </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#82AAFF;">setState</span><span style="color:#A6ACCD;">(() </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">                  _count += </span><span style="color:#F78C6C;">1</span><span style="color:#F07178;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">              </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">              child: const Text(</span></span>
<span class="line"><span style="color:#A6ACCD;">                &#39;点我&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">                style: TextStyle(fontSize: 26),</span></span>
<span class="line"><span style="color:#A6ACCD;">              ),</span></span>
<span class="line"><span style="color:#A6ACCD;">            ),</span></span>
<span class="line"><span style="color:#A6ACCD;">            Text(_count.toString())</span></span>
<span class="line"><span style="color:#A6ACCD;">          ],</span></span>
<span class="line"><span style="color:#A6ACCD;">        ),</span></span>
<span class="line"><span style="color:#A6ACCD;">      ),</span></span>
<span class="line"><span style="color:#A6ACCD;">    );</span></span>
<span class="line"><span style="color:#A6ACCD;">  }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  ///这是一个不常用到的生命周期方法，当父组件需要重新绘制时才会调用；</span></span>
<span class="line"><span style="color:#A6ACCD;">  ///该方法会携带一个oldWidget参数，可以将其与当前的widget进行对比以便执行一些额外的逻辑，如：</span></span>
<span class="line"><span style="color:#A6ACCD;">  /// if (oldWidget.xxx != widget.xxx)...</span></span>
<span class="line"><span style="color:#A6ACCD;">  @override</span></span>
<span class="line"><span style="color:#A6ACCD;">  void didUpdateWidget(WidgetLifecycle oldWidget) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">print</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">----didUpdateWidget-----</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">    super</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">didUpdateWidget</span><span style="color:#A6ACCD;">(oldWidget);</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  ///很少使用，在组件被移除时调用在dispose之前调用</span></span>
<span class="line"><span style="color:#A6ACCD;">  @override</span></span>
<span class="line"><span style="color:#A6ACCD;">  void deactivate() </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">print</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">-----deactivate------</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">    super</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">deactivate</span><span style="color:#A6ACCD;">();</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  ///常用，组件被销毁时调用：</span></span>
<span class="line"><span style="color:#A6ACCD;">  ///通常在该方法中执行一些资源的释放工作比如，监听器的卸载，channel的销毁等</span></span>
<span class="line"><span style="color:#A6ACCD;">  @override</span></span>
<span class="line"><span style="color:#A6ACCD;">  void dispose() </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">print</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">-----dispose-----</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">    super</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">dispose</span><span style="color:#A6ACCD;">();</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre></div><h2 id="app-生命周期" tabindex="-1">APP 生命周期 <a class="header-anchor" href="#app-生命周期" aria-label="Permalink to &quot;APP 生命周期&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">package:flutter/material.dart</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">AppLifecycle</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">extends</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">StatefulWidget</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  const </span><span style="color:#F07178;">AppLifecycle</span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;font-style:italic;">Key</span><span style="color:#A6ACCD;">? </span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">super</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">key</span><span style="color:#89DDFF;">);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">@</span><span style="color:#A6ACCD;">override</span></span>
<span class="line"><span style="color:#A6ACCD;">  _AppLifecycleState </span><span style="color:#F07178;">createState</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">_AppLifecycleState</span><span style="color:#89DDFF;">();</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">_AppLifecycleState</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">extends</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">State</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">AppLifecycle</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#FFCB6B;">with</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">WidgetsBindingObserver</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">@</span><span style="color:#A6ACCD;">override</span></span>
<span class="line"><span style="color:#A6ACCD;">  Widget </span><span style="color:#F07178;">build</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">BuildContext</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">context</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Scaffold</span><span style="color:#F07178;">(</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#A6ACCD;">appBar</span><span style="color:#F07178;">: </span><span style="color:#82AAFF;">AppBar</span><span style="color:#F07178;">(</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">title</span><span style="color:#F07178;">: </span><span style="color:#A6ACCD;">const</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Text</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Flutter应用生命周期</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">leading</span><span style="color:#F07178;">: </span><span style="color:#A6ACCD;">const</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">BackButton</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">      )</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#A6ACCD;">body</span><span style="color:#F07178;">: </span><span style="color:#A6ACCD;">const</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Text</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Flutter应用生命周期</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">    )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">@</span><span style="color:#A6ACCD;">override</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">void</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">initState</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">WidgetsBinding</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addObserver</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">super</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">initState</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">@</span><span style="color:#A6ACCD;">override</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">void</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">didChangeAppLifecycleState</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">AppLifecycleState</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">super</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">didChangeAppLifecycleState</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">print</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">state = $state</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">==</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">AppLifecycleState</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">paused</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#82AAFF;">print</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">App进入后台</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">==</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">AppLifecycleState</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">resumed</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#82AAFF;">print</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">App进去前台</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">==</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">AppLifecycleState</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">inactive</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">      </span><span style="color:#676E95;font-style:italic;">//不常用：应用程序处于非活动状态，并且未接收用户输入时调用，比如：来了个电话</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">@</span><span style="color:#A6ACCD;">override</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">void</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">dispose</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">WidgetsBinding</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">removeObserver</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">super</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">dispose</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="flutter-sdk-版本" tabindex="-1">flutter sdk 版本 <a class="header-anchor" href="#flutter-sdk-版本" aria-label="Permalink to &quot;flutter sdk 版本&quot;">​</a></h2><ul><li>stable（推荐）：为当前最稳定的 channel</li><li>beta：为每月 Flutter 官方调整选出来的最好的 dev 的 channel；</li><li>dev：为当前最新且充分测试后的 channel；</li><li>master：为当前最新的 channel；</li></ul><div class="language-npm"><button title="Copy Code" class="copy"></button><span class="lang">npm</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;"># 查看当前Flutte渠道</span></span>
<span class="line"><span style="color:#A6ACCD;">flutter channel</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;"># 切换Flutte渠道</span></span>
<span class="line"><span style="color:#A6ACCD;">flutter channel dev</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;"># 更新当前Flutte渠道</span></span>
<span class="line"><span style="color:#A6ACCD;">flutter upgrade</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-c11df1f0 data-v-fc0d1b73><!--[--><!--]--><div class="edit-info" data-v-fc0d1b73><!----><div class="last-updated" data-v-fc0d1b73><p class="VPLastUpdated" data-v-fc0d1b73 data-v-0de45606>上次更新: <time datetime="2023-03-27T03:49:39.000Z" data-v-0de45606></time></p></div></div><div class="prev-next" data-v-fc0d1b73><div class="pager" data-v-fc0d1b73><a class="pager-link prev" href="/fe-handbook/document/pages/nodeJS/nest.html" data-v-fc0d1b73><span class="desc" data-v-fc0d1b73>Previous page</span><span class="title" data-v-fc0d1b73>nest</span></a></div><div class="has-prev pager" data-v-fc0d1b73><a class="pager-link next" href="/fe-handbook/document/pages/dataStructure.html" data-v-fc0d1b73><span class="desc" data-v-fc0d1b73>Next page</span><span class="title" data-v-fc0d1b73>dataStructure</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"pages_advancedprogramming_chapterone.md\":\"8fd81287\",\"pages_htmlcss_layout.md\":\"f07c901d\",\"index.md\":\"4ccfffb7\",\"pages_advancedprogramming_index.md\":\"3885217d\",\"code_fe-rec_readme.md\":\"71d0c648\",\"readme.md\":\"df521108\",\"code_virtual-list_readme.md\":\"17e862f9\",\"pages_guide.md\":\"706d8779\",\"pages_jsbase_typeconversion.md\":\"df6df8ff\",\"pages_htmlcss_bfc.md\":\"21d6a345\",\"pages_jsbase_cookielocal.md\":\"07b498fe\",\"pages_jsbase_datatype.md\":\"6076c1b6\",\"pages_jsbase_prototype.md\":\"6b57d6e9\",\"pages_htmlcss_htmlcss.md\":\"8b4e53c2\",\"pages_advancedprogramming_chaptertwo.md\":\"ad76f5b8\",\"pages_advancedprogramming_chapterthree.md\":\"8207f883\",\"pages_htmlcss_align.md\":\"8cc3e186\",\"pages_git.md\":\"5308b89e\",\"pages_jsbase_arrayapi.md\":\"751b1dff\",\"pages_htmlcss_boxmodel.md\":\"498a703b\",\"pages_htmlcss_position.md\":\"c5594a7c\",\"pages_jsbase_binary.md\":\"9b13b269\",\"pages_htmlcss_dice.md\":\"cc205c39\",\"pages_workreview_vuexpersistence.md\":\"1df9efec\",\"pages_workreview_reduxpersistence.md\":\"2f4f8ba5\",\"pages_webpack.md\":\"e8ec95fb\",\"pages_jsbase_scope.md\":\"268d233b\",\"pages_vue_vuex4.0.md\":\"98700d83\",\"pages_workreview_reactsolt.md\":\"2438b161\",\"pages_jsbase_this.md\":\"9d7c8fa7\",\"pages_workreview_virtuallist.md\":\"1db3bb5e\",\"code_big-files-upload_index.md\":\"49cc321f\",\"pages_jsbase_regular.md\":\"fea9b33d\",\"pages_jsbase_eventloop.md\":\"ddceb0f2\",\"pages_htmlcss_rem-em-vw.md\":\"f5e61910\",\"pages_optimize.md\":\"9b05a225\",\"pages_jsbase_promotion.md\":\"7da50ccc\",\"pages_jsbase_eightleggedessay.md\":\"560c41b2\",\"pages_jsbase_promise.md\":\"3d80d27b\",\"pages_vue_vuerouter4.0.md\":\"5ca24aaa\",\"pages_htmlcss_margin.md\":\"6fd000ce\",\"pages_flutter_index.md\":\"b69ef00b\",\"pages_workreview_interfacesignaturedesign.md\":\"98a64266\",\"pages_workreview_stripe.md\":\"68fbf713\",\"pages_http.md\":\"42149b78\",\"pages_nginx.md\":\"76adfb79\",\"pages_nodejs_nest.md\":\"340072bd\",\"pages_updatelog.md\":\"3a8f3b74\",\"pages_linux.md\":\"db194270\",\"pages_nodejs_index.md\":\"b91cc4fe\",\"pages_ssr.md\":\"29ae7526\",\"pages_vue_vue2.0.md\":\"ddaba816\",\"pages_resume.md\":\"e770c83b\",\"pages_react_react.md\":\"dd542d19\",\"pages_workreview_monitor.md\":\"bef20b19\",\"pages_react_redux.md\":\"a3c335fe\",\"pages_workreview_bigfileupload.md\":\"93f0370f\",\"pages_datastructure.md\":\"60632978\",\"pages_workreview_imagecroppingcompression.md\":\"3273dca0\",\"pages_jsbase_coding.md\":\"fd837602\",\"pages_xss-csrf.md\":\"afbef4b3\",\"pages_designpatterns.md\":\"7ba6c4c8\",\"pages_workreview_imagedragverification.md\":\"de2e29d5\",\"pages_workreview_audio.md\":\"e00ea8e1\",\"pages_workreview_axiospackaging.md\":\"e241a1bb\",\"pages_htmlcss_grid.md\":\"fee00858\",\"pages_vue_vue3.0.md\":\"21ba1254\",\"pages_jsbase_typescript.md\":\"48ee2090\"}")
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"前端码农\",\"description\":\"前端码农手记\",\"base\":\"/fe-handbook/document/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"lastUpdatedText\":\"上次更新\",\"logo\":\"images/logo.svg\",\"nav\":[{\"text\":\"主页\",\"link\":\"/\"},{\"text\":\"指南\",\"link\":\"/pages/guide\"},{\"text\":\"更新日志\",\"link\":\"/pages/updateLog\"}],\"socialLinks\":[],\"sidebar\":[{\"collapsed\":false,\"items\":[{\"text\":\"开发指南\",\"link\":\"/pages/guide\"}]},{\"text\":\"JavaScript高级程序设计\",\"collapsed\":false,\"items\":[{\"text\":\"0.前言\",\"link\":\"/pages/advancedProgramming/index.md\"},{\"text\":\"1.什么是JavaScript\",\"link\":\"/pages/advancedProgramming/chapterOne.md\"},{\"text\":\"2.HTML中的JavaScript\",\"link\":\"/pages/advancedProgramming/chapterTwo.md\"},{\"text\":\"3.语言基础\",\"link\":\"/pages/advancedProgramming/chapterThree.md\"}]},{\"text\":\"vue技术栈\",\"collapsed\":false,\"items\":[{\"text\":\"vue2.0\",\"link\":\"/pages/vue/vue2.0.md\"},{\"text\":\"vue3.0\",\"link\":\"/pages/vue/vue3.0.md\"},{\"text\":\"vuex4.0\",\"link\":\"/pages/vue/vuex4.0.md\"}]},{\"text\":\"react技术栈\",\"collapsed\":false,\"items\":[{\"text\":\"react18\",\"link\":\"/pages/react/react.md\"},{\"text\":\"redux\",\"link\":\"/pages/react/redux.md\"}]},{\"text\":\"nodejs技术栈\",\"collapsed\":false,\"items\":[{\"text\":\"nodeJS\",\"link\":\"/pages/nodeJS/index.md\"},{\"text\":\"nest\",\"link\":\"/pages/nodeJS/nest.md\"}]},{\"text\":\"flutter\",\"collapsed\":false,\"items\":[{\"text\":\"flutter\",\"link\":\"/pages/flutter/index.md\"}]},{\"text\":\"数据结构算法&设计模式\",\"collapsed\":false,\"items\":[{\"text\":\"dataStructure\",\"link\":\"/pages/dataStructure.md\"},{\"text\":\"设计模式\",\"link\":\"/pages/designPatterns.md\"}]},{\"text\":\"js基础进阶\",\"collapsed\":false,\"items\":[{\"text\":\"数据类型\",\"link\":\"/pages/jsBase/dataType.md\"},{\"text\":\"数据类型转换\",\"link\":\"/pages/jsBase/typeConversion.md\"},{\"text\":\"原型与原型链\",\"link\":\"/pages/jsBase/prototype.md\"},{\"text\":\"闭包\",\"link\":\"/pages/jsBase/scope.md\"},{\"text\":\"this指针\",\"link\":\"/pages/jsBase/this.md\"},{\"text\":\"JS中的变量提升和函数提升\",\"link\":\"/pages/jsBase/promotion.md\"},{\"text\":\"异步&事件循环机制\",\"link\":\"/pages/jsBase/eventLoop.md\"},{\"text\":\"promise\",\"link\":\"/pages/jsBase/promise.md\"},{\"text\":\"cookie&local\",\"link\":\"/pages/jsBase/cookieLocal.md\"},{\"text\":\"arrayApi\",\"link\":\"/pages/jsBase/arrayApi.md\"},{\"text\":\"正则\",\"link\":\"/pages/jsBase/regular.md\"},{\"text\":\"coding\",\"link\":\"/pages/jsBase/coding.md\"},{\"text\":\"typescript\",\"link\":\"/pages/jsBase/typescript.md\"}]},{\"text\":\"前端综合\",\"collapsed\":false,\"items\":[{\"text\":\"前端八股文\",\"link\":\"/pages/jsBase/eightLeggedEssay.md\"},{\"text\":\"二进制\",\"link\":\"/pages/jsBase/binary.md\"},{\"text\":\"ssr\",\"link\":\"/pages/ssr.md\"},{\"text\":\"webpack\",\"link\":\"/pages/webpack.md\"},{\"text\":\"http\",\"link\":\"/pages/http.md\"},{\"text\":\"性能优化\",\"link\":\"/pages/optimize.md\"},{\"text\":\"xss-csrf\",\"link\":\"/pages/xss-csrf.md\"},{\"text\":\"linux\",\"link\":\"/pages/linux.md\"},{\"text\":\"nginx\",\"link\":\"/pages/nginx.md\"},{\"text\":\"git管理\",\"link\":\"/pages/git.md\"}]},{\"text\":\"工作复盘\",\"collapsed\":false,\"items\":[{\"text\":\"stripe支付体检优化\",\"link\":\"/pages/workReview/stripe.md\"},{\"text\":\"接口签名设计\",\"link\":\"/pages/workReview/interfaceSignatureDesign.md\"},{\"text\":\"redux数据持久化\",\"link\":\"/pages/workReview/reduxpersistence.md\"},{\"text\":\"vuex数据持久化\",\"link\":\"/pages/workReview/vuexpersistence.md\"},{\"text\":\"react插槽设计\",\"link\":\"/pages/workReview/reactSolt.md\"},{\"text\":\"大文件上传\",\"link\":\"/pages/workReview/bigfileUpload.md\"},{\"text\":\"音频录制\",\"link\":\"/pages/workReview/audio.md\"},{\"text\":\"虚拟列表\",\"link\":\"/pages/workReview/virtuaLlist.md\"},{\"text\":\"图片裁剪&压缩\",\"link\":\"/pages/workReview/imageCroppingCompression.md\"},{\"text\":\"axios封装\",\"link\":\"/pages/workReview/axiosPackaging.md\"},{\"text\":\"前端监控SDK\",\"link\":\"/pages/workReview/monitor.md\"},{\"text\":\"图片拖动验证\",\"link\":\"/pages/workReview/ImagedragVerification.md\"}]},{\"text\":\"html/css\",\"collapsed\":false,\"items\":[{\"text\":\"盒模型\",\"link\":\"/pages/htmlCss/boxModel.md\"},{\"text\":\"margin重叠\",\"link\":\"/pages/htmlCss/margin.md\"},{\"text\":\"bfc\",\"link\":\"/pages/htmlCss/bfc.md\"},{\"text\":\"圣杯布局&双飞翼布局\",\"link\":\"/pages/htmlCss/layout.md\"},{\"text\":\"flex画骰子\",\"link\":\"/pages/htmlCss/dice.md\"},{\"text\":\"position定位\",\"link\":\"/pages/htmlCss/position.md\"},{\"text\":\"对齐\",\"link\":\"/pages/htmlCss/align.md\"},{\"text\":\"rem-em-vw\",\"link\":\"/pages/htmlCss/rem-em-vw.md\"},{\"text\":\"grid布局\",\"link\":\"/pages/htmlCss/grid.md\"},{\"text\":\"htmlCss总结\",\"link\":\"/pages/htmlCss/htmlCss.md\"}]}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
    
  </body>
</html>